/*
  学习目标：掌握 - useEffect-第二个参数使用小结
   1. []  代表挂载后
   2. [依赖项]  代表挂载 / 更新二合一
   2. 不写👎, 代表挂载 / 更新二合一
 
*/

import React, { useState, useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  const [msg, setMsg] = useState('hello React');

  // 1. []  代表挂载后
  useEffect(() => {
    console.log('count变化了  ----->  ', count);
    document.title = count;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 2. [依赖项]  代表挂载 / 更新二合一
  // 特点： 💥 只会监听依赖项的变化
  useEffect(() => {
    console.log('count变化了  ----->  ', count);
    document.title = count;
  }, [count]);

  // 3. 👎不写第二个参数
  // 特点： 会监听所有数据的变化， 容易浪费性能， 造成界面卡顿
  useEffect(() => {
    console.log('count变化了  ----->  ', count);
    document.title = count;
  });

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>

      <hr />

      <h1>{msg}</h1>
      <button onClick={() => setMsg(msg + '~')}>+1</button>
    </div>
  );
}
